<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script src="ball.js"></script>
    <script src="underScore-min.js"></script>
</head>
<body>
<canvas id="canvas" width="900" height="600" style="border: 1px solid #000;">
    亲，你的浏览器不支持canvas！！！;
</canvas>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");


    var ballArray = [];
    var colors = ['red','blue','green','yellow','pink','orange','purple','skyblue'];

    // 监听鼠标的移动事件创建小球
    canvas.onmousemove = function (e) {
        var color = colors[_.random(0,colors.length - 1)];
        ballArray.push(new Ball({
            x:e.offsetX,
            y:e.offsetY,
            r:40,
            fillColor:color
        }))
    };

    setInterval(function () {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        // 先更新
        for (var i = 0; i < ballArray.length; i++) {
            ballArray[i].update();
        }
        // 在绘制
        for (var i = 0; i < ballArray.length; i++) {
            ballArray[i].render(ctx);
        }
    },20);

</script>
</body>
</html>